import React from 'react';

type Props = TodoProps & {
  updateTodo: (todo: ITodo) => void
  deleteTodo: (_id: string) => void
}

// 如您所见，这里有一个类型的功能组件React.FC（FC代表功能组件）。
// 它以一种支持saveTodo()我们将数据保存到DB 的方法作为支柱。

// 接下来，我们需要一个formData状态，该状态需要匹配ITodo类型才能满足编译器的要求。
// 这就是为什么我们将其传递给useState钩子。
// 我们还需要添加替代类型（{}），因为初始状态将是一个空对象。
const Todo: React.FC<Props> = ({todo, updateTodo, deleteTodo}) =>{
  const checkTodo:string = todo.status?`line-through`:''

  return (
    <div className="Card">
      <div className="Card--text">
        <h1 className={checkTodo}>{todo.name}</h1>
        <span className={checkTodo}>{todo.description}</span>
      </div>
      <div className="Card--button">
        <button 
          onClick={()=> updateTodo(todo)}
          className={todo.status?`hidden-button`:`Card--button__done`}
        >
          Complete
        </button>
        <button
          onClick={()=>deleteTodo(todo._id)}
          className="Card--button_delete"
        >
          Delete
        </button>
      </div>
    </div>
  )
}

export default Todo